<template>
    <div class="template-div-Lu">
      <a-modal
        title="选择人员"
        :visible="personnelListVisible"
        :maskClosable="false"
        :closable="true"
        :destroyOnClose="true"
        width="100%"
        :footer="null"
        :dialog-style="{ margin: '0 auto' }"
        wrapClassName="full-modal-personnelList-Lu"
        @cancel="closeVisible">
        <div class="table-Lu checkMan-List" style="font-size: 16px;" :key="personneKey">
          <div style="margin-bottom: 11px;">
            <div class="div-tag">
              <span class="title">已选人员：</span>
              <a-tag
                ::key="retagList"
                color="#108ee9"
                closable
                @close="handleClose($event,item)"
                v-for="(item,index) in this.tagList" :key="index">
                {{ item}}
              </a-tag>
            </div>
          </div>
          <div style="text-align: right;">
            <a-button @click="clearAll" style="margin-right: 5px;">清空已选</a-button>
            <a-button @click="checkOk" class="checkOk-btn">确认已选</a-button>
          </div>
          <div v-if="!radioCheck" class="div-tag" style="margin-top: 16px;height: 100%;">
            <span class="title">部门全选：</span>
            <!-- <div> -->
              <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChangea" class="data-dept">
                全选
              </a-checkbox>
            <!-- </div> -->
            <br />
            <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChangea" />
          </div>
          <br />
          <div class="checkList-dange">
            <div class='item_check' v-for='(item,index) in userListData' :key='index'>
              <div>
                <div class="data-dept" :style="{ borderTop: '1px solid #CDC9C9',marginTop:'5px',paddingTop:'5px'}">
                  <p v-if="radioCheck">{{ item.dept }}</p>
                  <a-checkbox v-else :indeterminate="item.indeterminate" :checked="item.checkAll" @change="onCheckAllChange($event,index,item.dept)">
                    {{ item.dept }}
                  </a-checkbox>
                </div>
                <!-- <br /> -->
                <a-checkbox-group  v-model="item.checkedList"  :options="item.userList" @change="onChange($event,index,item.userList)" >
                <span slot='label' slot-scope='{value}'>
                    {{value}}
                </span>
                </a-checkbox-group>
              </div>
            </div>
          </div>
        </div>
      </a-modal>
    </div>
  </template>
  <script>
  import {UserWithList} from './service/index'
  export default {
    props: {
      modaObj: {
        type: Object,
        default: false,
      },
      radioCheck:{ // 默认多选，true为单选
          type:Boolean,
          default:false,
          required:false,
      },
    },
    watch: {
      modaObj:{
          handler (newval, oldVal) {
            // //console.log('modaObj',newval)
            if(newval.oldId){
              this.getData(newval)
            }
            if(this.radioCheck && newval.oldId){
              this.radioValue = newval.oldId
            }
          },
          deep: true
      },
    },
    data() {
      return {
        personnelListVisible: false,
        radioValue: [],
        checkOkList: [],
        checkedList: [],
        defaultCheckedList: [],
        indeterminate: false, // 全选
        checkAll: false, // 指定当前是否选中
        plainOptions: [],
        userListData: [],
        olduserListData: [],
        tagList: [],
        retagList: '',
        personneKey: '',
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getData(newval){
        this.clearValue()
        newval.oldId.forEach((item,i) => {
          this.userListData.forEach((itema,indexa) => {
            itema.userList.forEach((itemb,indexb) => {
              if(item == itemb.value){
                //console.log(itemb.label)
                itema.indeterminate = true
                itema.checkedList.push(item)
                this.tagList.push(itemb.label)
              }
            })
          })
        })
        this.personneKey = Date.now()
      },
      getList(){
        UserWithList().then(res => {
          // //console.log('UserWithList----------',res.result.deptList)
          this.plainOptions = res.result.deptList
          // this.userList = res.result.deptUserList
          let arr = []
              arr  = res.result.deptUserList
          arr.forEach(item => {
            let List = []
            item.userList.forEach(items => {
              items = {
                label: items.name,
                value: items.id
              }
              List.push(items)
            })
            item = {
              dept: item.dept,
              checkAll:false,
              indeterminate : false,
              checkedList : [],
              userList: List,
            }
             this.userListData.push(item)
          //   //console.log('userListData',this.userListData)
          })
          this.olduserListData = [...this.userListData]
          // //console.log('userListData',this.userListData)
        })
      },
      closeVisible(e){
        this.personnelListVisible = false
        //console.log('关闭')
        this.checkAll = false
        this.tagList = []
        this.checkedList = []
        this.checkOkList = []
        this.userListData.forEach((item,i) => {
          item.checkAll = false
          item.indeterminate = false
          item.checkedList = []
        })
        //console.log('userListData',this.userListData)
      },
      clearValue(){
          this.checkAll = false
          this.tagList = []
          this.checkedList = []
          this.checkOkList = []
          this.userListData.forEach((item,i) => {
              item.checkAll = false
              item.indeterminate = false
              item.checkedList = []
          })
      },
      handleClose($event,tagNamw){
        // //console.log($event)
        // //console.log(tagNamw)
        $event.preventDefault(); // 取消事件的默认行为,否则将一次删除两个
        // //console.log(tagNamw);
        this.tagList = this.tagList.filter(item => item !== tagNamw);
        // //console.log(this.tagList)
        this.userListData.forEach((item,i) => {
          item.userList.forEach((items,index) => {
            if(items.label == tagNamw) {
              this.userListData[i].checkAll = false
              this.userListData[i].checkedList = this.userListData[i].checkedList.filter(itema => itema !== items.value);
            }
          })
          this.checkedList = this.checkedList.filter(itemb => itemb !== item.dept)
          // //console.log(this.checkedList)
        })
        // //console.log(this.tagList)
      },
      clearAll(){
        let that = this
        that.$confirm({
          title: '您确定要清空已选吗?',
          content: '',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
          //   that.checkAll = false
          //   that.indeterminate = false
          //   that.tagList = []
          //   that.checkedList = []
          //   that.userListData.forEach((item,i) => {
          //     item.checkAll = false
          //     item.indeterminate = false
          //     item.checkedList = []
          //   })
            that.clearValue()
            // //console.log(that.userListData)
          },
          onCancel() {
            //console.log('Cancel');
          },
        });
      },
      checkOk(){
        this.userListData.forEach((item,i) => {
          item.checkedList.forEach((items,index) => {
            this.checkOkList.push(items)
          })
        })
        // //console.log('所有已选',this.checkOkList,this.tagList)
        this.$emit('checkPersonnel',this.modaObj.place,this.checkOkList,this.tagList)//触发checkPersonnel方法，this.checkOkList 为向父组件传递的数据
        this.closeVisible()
      },
      onChangea(checkedList) {
        //console.log(checkedList)
        this.userListData.forEach((item,i) => {
          if(checkedList.indexOf(item.dept)!==-1){
            this.userListData[i].checkAll = true
            this.userListData[i].checkedList = this.userListData[i].userList.map(item=>{ return item.value })
            // ---
            this.userListData[i].userList.forEach(item => {
              if(this.tagList.indexOf(item.label) == -1){
                this.tagList.push(item.label)
              }
            })
          } else {
            this.userListData[i].checkAll = false
            this.userListData[i].checkedList = []
            this.userListData[i].userList.forEach(item => {
              this.tagList.forEach((items,i) => {
                if(item.label == items){
                  this.tagList.splice(i,1)
                }
              })
            })
          }
        })
        this.indeterminate = !!checkedList.length && checkedList.length < this.plainOptions.length;
        this.checkAll = checkedList.length === this.plainOptions.length;
      },
      onCheckAllChangea(e) {
        //console.log(e.target.checked)
        Object.assign(this, {
          checkedList: e.target.checked ? this.plainOptions : [],
          indeterminate: false,
          checkAll: e.target.checked,
        });
        // newArr = this.userListData[index].userList.map(item=>{
        //     return item.value
        //   })
        if(e.target.checked){
          this.tagList = []
          this.userListData.forEach((item,i) => {
            this.userListData[i].checkAll = true
            this.userListData[i].checkedList = this.userListData[i].userList.map(items=>{
              return items.value
            })
            let arr = []
                arr = this.userListData[i].userList.map(itema=>{
                        return itema.label
                      })
            arr.forEach(itemb => {
              this.tagList.push(itemb)
            })
          })
        } else {
          this.tagList = []
          this.userListData.forEach((item,i) => {
            this.userListData[i].checkAll = false
            this.userListData[i].checkedList = []
          })
        }


      },
      onChange(e,index,List) {//单个选择
          //console.log(e)
          //console.log(this.userListData[index].checkedList)
          //console.log(List)
          if(this.radioCheck){
              if(this.tagList.length >= 1){
                  this.clearValue()
                  this.userListData[index].checkedList = []
                  if(e.length == 1){
                      this.userListData[index].checkedList.push(e[0])
                          List.forEach(item => {
                          if(e[0] == item.value){
                              this.tagList.push(item.label)
                          }
                      })
                  } else {
                      //console.log('radioValue',this.radioValue)
                      let newId = e.filter(itema => itema !== this.radioValue[0])
                      this.userListData[index].checkedList = newId
                      this.radioValue = this.userListData[index].checkedList
                      List.forEach(item => {
                          if(newId[0] == item.value){
                              this.tagList.push(item.label)
                          }
                      })
                  }
              } else {
                  this.userListData[index].checkedList = []
                  this.userListData[index].checkedList.push(e[0])
                  this.radioValue = this.userListData[index].checkedList
                  List.forEach(item => {
                      if(e[0] == item.value){
                          this.tagList.push(item.label)
                      }
                  })
              }
              //console.log(this.userListData[index].checkedList)
          } else {
              let arr = [] // userList
              let arr1 = [] //勾选-最新
              let arr2 = [] // tagList与userList相同的
              let arr3 = [] // tagList与勾选-最新不相同的
              List.forEach(item => {
                  arr.push(item.label)
                  if(e.indexOf(item.value) !==-1){
                  arr1.push(item.label)
                  }
                  if(this.tagList.indexOf(item.label) !==-1){
                  arr2.push(item.label)
                  }
              })
              // //console.log('arr1',arr1)
              // //console.log('arr2',arr2)
              // //console.log('tagList',this.tagList)

              let list= [];
              let list2= [];
              list = arr1.filter(item=> arr2.indexOf(item) === -1);
              list2 = arr2.filter(item=> arr1.indexOf(item) === -1);

              // //console.log('不同的1',list)
              // //console.log('不同的2',list2)

              var temparray = []; //临时数组1
              if(list.length>list2.length){
                  temparray = list
              } else {
                  temparray = list2
              }

              if(temparray.length > 0){
                  temparray.forEach((item,i) => {
                  if(this.tagList.indexOf(item) == -1){
                      this.tagList.push(item)
                  } else {
                      this.tagList.forEach((items,index) => {
                      if(item == items){
                          this.tagList.splice(index,1)
                      }
                      })
                  }
                  })
              } else {
                  // //console.log('000',this.tagList)
                  this.tagList = this.tagList
                  // this.retagList = Date.now()
                  // //console.log('111',this.tagList)
              }


              //console.log(this.tagList)


          }
              this.userListData[index].indeterminate = !!this.userListData[index].checkedList.length && this.userListData[index].checkedList.length < this.userListData[index].userList.length;
              this.userListData[index].checkAll = this.userListData[index].checkedList.length === this.userListData[index].userList.length;
              //console.log(this.userListData[index].checkAll)
              if(this.userListData[index].checkAll){
                  this.checkedList.push(this.userListData[index].dept)
              } else {
                  this.checkedList = this.checkedList.filter(itema => itema !== this.userListData[index].dept);
              }
      },
      onCheckAllChange(e,index,dept) {//选择全部的事件
        //如果选中全选的话就遍历拿出当前相对项的数组的全部值
        // //console.log(e)
        // //console.log(index)
        // //console.log(e.target.checked) // true or false
        let newArr = []
        if(e.target.checked){
          newArr = this.userListData[index].userList.map(item=>{
            return item.value
          })
        }
        this.userListData[index].checkedList = e.target.checked ? newArr:[]
        this.userListData[index].indeterminate = false
        this.userListData[index].checkAll = e.target.checked
        // //console.log('checkedList',this.userListData[index].checkedList)
        // //console.log('checkAll',this.userListData[index].checkAll)


        let arr = this.userListData[index].userList
        // //console.log(arr)
        // //console.log(check)
        if(e.target.checked){
          this.checkedList.push(dept)
          arr.forEach(item => {
            if(this.tagList.indexOf(item.label) == -1){
              this.tagList.push(item.label)
            }
          })
        } else {
          // //console.log('checked',e.target.checked)
          this.checkedList.forEach((item,i) => {
            if(dept == item){
              this.checkedList.splice(i,1)
            }
          })
          this.userListData[index].userList.forEach((item,i) => {
            this.tagList.forEach((items,index) => {
              // //console.log(item.label,items)
              if(item.label == items){
                // //console.log('11111111')
                this.tagList.splice(index,1)
              }
            })
          })
        }
      },
    },
  }
  </script>
  <style lang="less">
  .full-modal-personnelList-Lu {
      .checkMan-List {
          width: 100% !important;
          // padding-top: 50px;
      }
      .ant-modal {
          // background-color: #5ca3e5;
          position: static;
          width: 100%;
          height: 100%;
          top: 0 !important;
          padding-bottom: 0 !important;
          margin: 0 auto !important;
      }
      .ant-modal-body {
        background-color: #fff;
      }
      .ant-modal-content {
          height: 100%;
      }
      .table-Lu {
      .ant-checkbox-group-item {
          width: 180px;
      }
      .sale_allot.ant-modal{
          width: 100%;
      }
      .sale_allot .ant-modal-body{
          // width: 60% !important;
          overflow: auto;
          // max-height: 550px;
          margin: 0 auto;
      }
      }
      .div-tag{
          width:100%;
          // height:100px;
          min-height: 100px;
          height: 100%;
          padding:5px 30px;
          border-radius: 5px;
          border:1px solid #108ee9;
          .ant-tag {
              padding: 5px 10px;
              font-size: 16px;
              margin-bottom: 5px;
          }
      }
      span.title{
          display:block;
          width:100px;
          height:30px;
          position:relative;
          top:-15px;
          text-align: center;
          background: white;
          font-weight: 500;
      }
      .item_check {
          line-height: 35px;
          .ant-checkbox-group-item {
              width: 100px;
          }
      }
      .data-dept {
      span:nth-child(2) {
          // background-color: #87CEFA;
          // color: #fff;
          font-size: 18px;
          font-weight: 600;
      }
      }
      .checkOk-btn {
          background-color: #108ee9 !important;
          color: #fff !important;
      }
      .checkList-dange {
          // height: 57vh;
          height: calc(100vh - 414px);
          overflow: scroll;
      }
  }
  </style>
  <style>
  @import url('../css/oaClass.css');
  </style>
